;(function($){
    "use strict";
    // console.log($)
    $.fn.banner = function(ops){
        // console.log("轮播图插件")
        ops = ops || {};
        if(!ops.items){
            console.error("至少传入items，表示要渲染的图片信息");
        };
        console.log(ops.items);
        // 接收参数，处理默认参数，解析参数
        let {items, btn=true, list=true, autoPlay=true, delayTime=2000, moveTime=200, index=0, activeStyle={} } = ops;
        // console.log(items, btn, list, autoPlay, delayTime, moveTime, index, activeStyle);
        // this是执行当前方法的jq元素对象
        // console.log(this)

        // 6. 假设要走的图片的索引
        let prev;
        
        // 渲染基本结构start
        init.call(this);
        function init(){
            // 1. 渲染所有的图片元素和图片链接
            let imgboxCont = "";
            for(let i=0;i<items.length;i++){
                imgboxCont += `<a href="${items[i].link}"><img src="${items[i].src}" alt="${items[i].alt}" title="${items[i].title}"></a>`
            }

            // 2. 创建图片容器，插入所有的图片，并设置样式
            $("<div class='imgbox'></div>").appendTo(this).html(imgboxCont).css({
                width:1450,
                height:500
            }).children("a").css({
                width:1450,
                height:500,
                position:"absolute",
                left:1450,
                top:0
            }).eq(index).css({
                left:0
            }).end().children("img").css({
                width:1450,
                height:500
            })
        }
        // 渲染基本结构end

        // 3. 左右按钮start
        if(btn){
            // 4. 渲染左右按钮的结构
            $("<div class='btns'></div>").appendTo(this).append($("<span class='left'>左</span>")).append($("<span class='right'>右</span>")).children("span").css({
                width:40,
                height:40,
                position:"absolute",
                top:130,
                textAlign:"center",
                lineHeight:"40px",
                background:"rgba(200,200,200,0.5)",
                cursor:"pointer"
            }).eq(1).css({
                right:0
            }).click(rightClick).end().eq(0).click(leftClick);

        }
        function rightClick(){      // 5. 右按钮事件
            // console.log("右");
            // 7. 计算索引
            if(index === items.length-1){
                index = 0;
                prev = items.length-1
            }else{
                index++
                prev = index - 1;
            }
            // console.log(prev, index);
            // 8. 开始运动，传入方向值，1或-1
            btnMove(1);
        }
        function leftClick(){
            // console.log("左");
            if(index === 0){
                index = items.length-1;
                prev = 0;
            }else{
                index--
                prev = index + 1;
            }
            // console.log(prev, index);
            btnMove(-1);
        }
        function btnMove(d){
            $(".imgbox").children("a").eq(prev).css({   // 9. 先设置要走的元素的初始位置
                left:0
            }).stop().animate({     // 10. 运动到要走的目标位置
                left:-1450 * d
            }, moveTime).end().eq(index).css({   // 11. 再设置要进来的元素的初始位置
                left:1450 * d
            }).stop().animate({     // 12. 运动到要进来的目标位置
                left:0
            }, moveTime)

            // 问题1. 左右按钮被触发时，切换分页器的样式
            if(!list) return;
            $(".list").children("li").css({
                background:"",
                color:""
            }).eq(index).css(activeStyle)
        }
        // 左右按钮end

        // 13. 分页器start
        if(list){
            // 14. 创建分页器元素
            let str = "";
            for(let i=0;i<items.length;i++){
                str += `<li>${i+1}</li>`
            }
            // 15. 创建分页器容器，并将分页器元素插入，设置样式
            $("<ul class='list'></ul>").appendTo(this).html(str).css({
                position:"absolute",
                left:0,right:0,bottom:0,
                background:"rgba(200,200,200,0.5)",
                display:"flex",
                textAlign:"center",
                lineHeight:"30px"
            }).children("li").css({
                flex:1,
                borderLeft:"solid 1px #fff",
                borderRight:"solid 1px #fff"
            }).eq(index).css(activeStyle).end().click(function(){       // 16. 绑定分页器事件
                // 要走的是index
                // 要进来的$(this).index()
                // console.log(index, $(this).index())
                // 17. 根据点击的li的索引和当前正在显示的索引大小，判断方向
                if(index > $(this).index()){
                    // 18. 开始运动，传入点击的索引，和方向
                    listMove($(this).index(), -1)
                }
                if(index < $(this).index()){
                    listMove($(this).index(), 1)
                }

                // 20. 修改li的对应的样式
                $(".list").children("li").css({
                    background:"",
                    color:""
                }).eq($(this).index()).css(activeStyle)

                // 19. 点击之后，将点击的索引，设置给原来的当前索引
                index = $(this).index();
            })

            function listMove(now, d){
                $(".imgbox").children("a").eq(index).css({   // 先设置要走的元素的初始位置
                    left:0
                }).stop().animate({     // 运动到要走的目标位置
                    left:-1450 * d
                }, moveTime).end().eq(now).css({   // 再设置要进来的元素的初始位置
                    left:1450 * d
                }).stop().animate({     // 运动到要进来的目标位置
                    left:0
                }, moveTime)
            }
        }
        // 分页器end

        // 21. 自动播放start
        if(autoPlay){
            // 22. 开启计时器，自动执行右按钮的事件处理函数
            let t = setInterval(() => {
                // 问题2：如果没传左右按钮，自己执行右按钮的事件处理函数
                // 前提：需要将右按钮的事件处理函数单独封装出来，不能随着btn的传参定义或不定义
                // $(".right").trigger("click")
                rightClick();
            }, delayTime);

            // 23. 鼠标进入大框，停止计时器
            // 离开，重新开启计时器
            this.hover(function(){
                clearInterval(t)
            },function(){
                t = setInterval(() => {
                    rightClick();
                }, delayTime);
            })
        }
        // 自动播放end

        // banner end...
    }
})(jQuery);